/* eslint-disable no-unused-vars */
import { Form } from 'ant-design-vue'
const { Item } = Form
let timeFn = new Date().getTime()
export default {
  name: 'formGround',
  props: {
    formFields: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    // 请求下拉框接口
    const { formFields } = this
    const { formSetting: { name }, item } = formFields
    let optionsArray = {
      [name]: this.$form.createForm(this, { onValuesChange: this.FormChange }),
      style: { width: '100%' }
    }
    for (let i = 0; i < item.length; i++) {
      let itemList = item[i]
      itemList.option && (() => {
        itemList.option instanceof Function ? (itemList.option().then(res => {
          this[itemList.decorator[0] + 'option'] = res
        })) : optionsArray[itemList.decorator[0] + 'option'] = itemList.option
        optionsArray[itemList.decorator[0] + 'option'] = []
      })(i)
      // 注册组件
      this.$options.components[itemList.myComponents] = itemList.myComponents
    }
    return optionsArray
  },
  created () {
    const { formSetting: { name } } = this.formFields
    this.$emit(`${name}`, this[name])
  },
  methods: {
    // 渲染iform-item
    renderItem (h, setting = {}, index, disabled) {
      let flag = Object.prototype.toString.call(setting.disabled)
      const type = `a-${setting.type}`
      const Props = Object.assign({}, {
        valueFormat: setting.valueFormat,
        style: setting.style || this.style,
        key: setting.decorator[0],
        disabled: flag === '[object Boolean]' ? setting.disabled : disabled
      })
      const InputProps = Object.assign({}, Props || {}, {
        attrs: Props,
        ref: setting.decorator[0],
        $slots: {},
        on: {
          change: (v, e) => setting.change && setting.change(v, this)
        }
      })
      return (
        <Item label={setting.label} >
          {
            setting.render instanceof Function ? (
              setting.render(h, setting.decorator, setting.change, index)
            ) : setting.type ? (setting.type === 'select' ? this.renderSelect(setting, disabled, flag) : (
              <type InputProps placeholder={setting.placeholder} v-decorator={setting.decorator || []}></type>
            )) : null
          }
        </Item>
      )
    },
    // 渲染select
    renderSelect (setting, disabled, flag) {
      let setValue = setting.lebalValue ? setting.lebalValue : { name: 'label', value: 'value' }
      let setArray = []
      // 当前select中option数组
      let optionArray = this[setting.decorator[0] + 'option']
      setting.option instanceof Function ? optionArray.map(i => {
        let setValueObj = {}
        for (let key in setValue) {
          setValueObj[setValue[key]] = i[setValue[key]]
        }
        setArray.push(setValueObj)
      }) : setArray = setting.option
      const Props = Object.assign({}, {
        style: setting.style || this.style,
        key: setting.decorator[0],
        disabled: flag === '[object Boolean]' ? setting.disabled : disabled
      })

      const SelectProps = Object.assign({}, Props || {}, {
        attrs: Props,
        ref: setting.decorator[0],
        $slots: {},
        on: {
          change: (v, e) => setting.change && setting.change(v, e, this)
        }
      })
      return <a-select SelectProps placeholder={setting.placeholder} v-decorator={setting.decorator || []}>
        {
          setArray.map(i =>
            <a-select-option allValue={i} value={i[setValue.value]} key={i[setValue.value]}>{i[setValue.name]}</a-select-option>)
        }
      </a-select>
    },
    // 监听formVlaue变化
    FormChange () {
      const { formFields: { formSetting: { selfUpdate } } } = this
      if (new Date().getTime() - timeFn > 300) {
        // 重新赋值时间
        timeFn = new Date().getTime()
        !selfUpdate && this.$forceUpdate()
      }
    }
  },
  render (h) {
    const { formFields: { formSetting: { name, selfUpdate, disabled } }, renderItem } = this
    const { formFields: { item } } = this
    return (<Form form={this[name]} selfUpdate={selfUpdate} >
      {item.map((item, index) => renderItem(h, item, index, disabled))}
    </Form>)
  }
}
